<template>
  <div class="table-container">
    <div class="table-title">电源侧明细</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">预测数电费 = 执行电价（需&gt;0 ） * 预测数电量</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table
      ref="tableRef"
      :data="tableData.data"
      key="itemKey"
      border
      height="500"
      style="width: 100%"
    >
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="电源基本情况" width="150">
        <el-table-column prop="name" label="名称" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="投运时间" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.time"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="capacity" label="装机容量" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.capacity"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="类别" width="180">
          <template #default="scope">
            <el-select
              v-model="scope.row.category1"
              placeholder="Select"
              size="small"
              style="width: 40%"
            >
              <el-option
                v-for="item in catOptions1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="scope.row.category2"
              placeholder="Select"
              size="small"
              style="width: 60%"
            >
              <el-option
                v-for="item in catOptions2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="电价（不含税）">
        <el-table-column prop="ele_cat" label="电价类别" width="120">
          <template #default="scope">
            <el-select
              v-model="scope.row.ele_cat"
              placeholder="Select"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in priceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="政府批复电价/协议电价" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="exe_price" label="执行电价">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.exe_price"></el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="预测数">
        <el-table-column prop="fore_electric" label="电量" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.fore_electric"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fore_cost" label="电费">
          <template #default="scope">
            <span>{{ getForecastPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="实际发生数">
        <el-table-column prop="actual_electric" label="电量" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.actual_electric"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actual_cost" label="电费">
          <template #default="scope">
            <span>{{ getActualPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="差额">
        <el-table-column prop="dif_electric" label="电量" width="120">
          <template #default="scope">
            <span>{{ getDifElectric(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dif_cost" label="电费">
          <template #default="scope">
            <span>{{ getDifPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Purchase',
  inheritAttrs: false,
});

const tableRef = ref();

const activeNames = ref('1');
const handleChange = (val: any) => {};

const catOptions1 = reactive([
  {
    value: '水电',
    label: '水电',
  },
  {
    value: '风光',
    label: '风光',
  },
  {
    value: '其他',
    label: '其他',
  },
]);
const catOptions2 = reactive([
  {
    value: '网内自有电源',
    label: '网内自有电源',
  },
  {
    value: '网内其他电源',
    label: '网内其他电源',
  },
  {
    value: '县间交易购入',
    label: '县间交易购入',
  },
  {
    value: '县间交易送出',
    label: '县间交易送出',
  },
  {
    value: '其他电网购入',
    label: '其他电网购入',
  },
]);
const priceOptions = reactive([
  {
    value: '政府定价',
    label: '政府定价',
  },
  {
    value: '协商价格',
    label: '协商价格',
  },
  {
    value: '未定价',
    label: '未定价',
  },
  {
    value: '其他，备注说明',
    label: '其他，备注说明',
  },
]);

const tableData = reactive({
  data: [
    {
      name: '',
      time: '',
      capacity: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      time: '',
      capacity: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      time: '',
      capacity: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      time: '',
      capacity: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      time: '',
      capacity: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
  ],
});

const getForecastPrice = (row: any) => {
  if (row.exe_price && row.fore_electric) {
    return row.exe_price * row.fore_electric;
  } else {
    return '-';
  }
};
const getActualPrice = (row: any) => {
  if (row.exe_price && row.actual_electric) {
    return row.exe_price * row.actual_electric;
  } else {
    return '-';
  }
};
const getDifElectric = (row: any) => {
  if (row.actual_electric && row.fore_electric) {
    return row.actual_electric - row.fore_electric;
  } else {
    return '-';
  }
};
const getDifPrice = (row: any) => {
  if (row.actual_cost && row.fore_cost) {
    return row.actual_cost - row.fore_cost;
  } else {
    return '-';
  }
};
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>